<template>
	<div class="html_a">
		<van-nav-bar
		  class="header"	
		  left-arrow
		  @click-left="onClickLeft"
		  sticky
		>			
			<van-icon name="arrow-left" slot="left" color="#333"  size="20"/>
			<div slot="title">我的合伙人</div>	
		</van-nav-bar>	  
		
		<div class="tabs">
			<van-tabs v-model="active" color="#FFD630">
				
			  <van-tab title="我的合伙人(123)">
			  	 <div class="total">
			  	 	共获得奖金：800.00元
			  	 </div>
			  	 <div class="tabs_wrap">
			  	 	<div class='flex1_wrap' v-for="(item,index) in obj" :key="index">
						<van-swipe-cell @open="openCell" :name="index" @close="closeCell">
							<div>
					  	 		<div class="mask" v-show="item.show">
					  	 			<img src="../../../../static/img/lanhu2/08.png" alt="" />
					  	 		</div>								
						  	 	<div class="flex1 active">
						  	 		<div class="word1">用户名：云水逸zyy</div>
						  	 		<div class="word2">2020/04/02拓展</div>
						  	 	</div>
						  	 	<div class="mb14">
		                             <div class="disflex">
		                             	<div class="word3">总业绩：</div>
		                             	<div>500.00元</div>
		                             </div>
		                             <div class="disflex">
		                             	<div class="word3">本期业绩：</div>
		                             	<div>300.00元</div>
		                             </div>
						  	 	</div>
						  	 	<div class="mb14">
		                             <div class="disflex">
		                             	<div class="word3">上期奖金：</div>
		                             	<div class="word4" @click="showHairBonusWin">500.00元</div>
		                             </div>
		                             <div class="disflex">
		                             	<div class="word3">奖金比例：</div>
		                             	<div class="word4" @click="setBonus">3%</div>
		                             </div>
						  	 	</div>	
						  	 	<div class="mb14">
		                             <div class="disflex">
		                             	<div class="word3">奖励周期：</div>
		                             	<div @click="setCycle" class="word4">7天</div>
		                             </div>
		                             <div class="disflex">
		                             	<div class="word3">总奖金：</div>
		                             	<div>300.00元</div>
		                             </div>
						  	 	</div>	
					  	 	</div>
						    <template #right>
							    <img src="../../../../static/img/lanhu2/09.png" alt="" style="width: 60px;">
							</template>
						</van-swipe-cell>				  	 	
			  	 	</div>
			  	 </div>	
			  	 
			     <div class="add" >
			     	<img src="../../../../static/img/lanhu2/07.png" alt="" @click="showAddPartnerWin"/>
			     </div>     
			     
			  </van-tab>				
			  <van-tab title="我加入的(123)">
			  	 <div class="total">
			  	 	共获得奖金：800.00元
			  	 </div>
			  	 <div class="tabs_wrap">
			  	 	<div class="flex1_wrap" v-for="item in 3">
				  	 	<div class="flex1 active">
				  	 		<div class="word1">用户名：云水逸zyy</div>
				  	 		<div class="word2">2020/04/02拓展</div>
				  	 	</div>
				  	 	<div class="mb14">
                             <div class="disflex">
                             	<div class="word3">总业绩：</div>
                             	<div>500.00元</div>
                             </div>
                             <div class="disflex">
                             	<div class="word3">本期业绩：</div>
                             	<div>300.00元</div>
                             </div>
				  	 	</div>
				  	 	<div class="mb14">
                             <div class="disflex">
                             	<div class="word3">上期奖金：</div>
                             	<div class="word4">500.00元</div>
                             </div>
                             <div class="disflex">
                             	<div class="word3">奖金比例：</div>
                             	<div>3%</div>
                             </div>
				  	 	</div>	
				  	 	<div class="mb14">
                             <div class="disflex">
                             	<div class="word3">奖励周期：</div>
                             	<div>7天</div>
                             </div>
                             <div class="disflex">
                             	<div class="word3">总奖金：</div>
                             	<div>300.00元</div>
                             </div>
				  	 	</div>					  	 	

			  	 	</div>
			  	 </div>					  	
			 
			  </van-tab>
			  <van-tab title="我拓展的">
			  	 <div class="tabs_wrap">
			  	 	<div class="flex1_wrap" v-for="item in 3">
				  	 	<div class="flex1">
				  	 		<div class="word1">用户名：云水逸zyy</div>
				  	 		<div class="word2">2020/04/02拓展</div>
				  	 	</div>
				  	 	<div>
				  	 		<span>总业绩：500.00 元</span> 
				  	 		<span style="margin-left: 15px;">上月业绩：300.00元</span>
				  	 	</div>			  	 	
			  	 	</div>
			  	 </div>			  	
			  </van-tab>
			</van-tabs>	
		</div>
		
		
		
		<!--奖金比例弹框-->
		<floor61 ref="floor61"></floor61>
		
		
		<!--周期比例弹框-->
		<floor62 ref="floor62"></floor62>	
		
		
		<floor63 ref="floor63"></floor63>
		
		
		<floor64 ref="floor64"></floor64>	
		
		
	</div>	
</template>

<script>
import Floor61 from '_c/market/floor/floor61.vue'	
import Floor62 from '_c/market/floor/floor62.vue'	
import Floor63 from '_c/market/floor/floor63.vue'
import Floor64 from '_c/market/floor/floor64.vue'
import '@/assets/reset/partner.css'
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	components: {
	    Floor61,Floor62,Floor63,Floor64
	},		
	data() {
       return {
         active:0,
         obj:[{show:false},{show:false},{show:false},{show:false},{show:false},{show:false}]
       }
	},
	methods: {
         openCell(res){
         	this.obj[res.name].show=true
         },
         closeCell(res){
         	this.obj[res.name].show=false
         },
         // 设置奖金比例
         setBonus(){
         	this.$refs.floor61.showWin()
         },
         // 设置奖励周期
         setCycle(){
         	this.$refs.floor62.showWin()
         },
         // 打开添加合伙人窗口
         showAddPartnerWin(){
         	this.$refs.floor63.showWin()
         },
         // 打开发放奖金窗口
         showHairBonusWin(){
         	this.$refs.floor64.showWin()
         }
	},
	mixins:[publicFun],//混入		
	mounted() {
		
	}
}	
</script>

<style scoped="" lang="scss">
.html_a{background: #f8f8f8;min-height: 100%;width: 100%;position: absolute;}	
.header{position: fixed;left: 0;top: 0;width: 100%;z-index: 10}
.tabs{margin-top: 44px;
  .add{text-align: center;padding: 20px 0 50px;
    img{width: 60px;}
  }
  .tabs_wrap{margin-top: 5px;padding: 0 15px;background: #fff;
    .flex1_wrap{padding: 15px 0;border-bottom: 1px solid #f0f0f0;position: relative;
      .mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;
        img{z-index: 100;width: 100%;height: 100%;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
      }
    }
    .flex1_wrap:nth-last-child(1){border:none}
    .flex1{display: flex;justify-content: space-between;margin-bottom: 28px;}
    .flex1.active{margin-bottom: 14px;}
    .word1{font-size: 13px;color: #333;}
    .word2{color: #999;font-size: 12px;}
    .word4{color: #3CACEC;}    
  }
}
.total{padding: 10px 15px;background: #fff;color: #FB713B;}
.mb14{margin-bottom: 14px;width: 80%;display: flex;
   .disflex{align-items:center;display: flex;flex: 1;
     .word3{width: 64px;}
   }
}


</style>